<template>
  <UnModel :title="title" v-model="props.modelValue" @onClose="closeModel" @onOk="onOk" :width="600">
    <div class="user-box d-flex">
      <div class="left">
        <div class="top">
          <el-input
            v-model="searchName1"
            style="width: 240px"
            placeholder="请输入名称"
            clearable
            @input="searchAllUser()"
          />
        </div>
        <div class="container" v-infinite-scroll="load">
          <el-checkbox-group v-model="checkList" @change="changeUser">
            <ul>
              <li v-for="item in userList" :key="item.id">
                <el-checkbox :label="item.name" :value="item.id">{{ item.name }}</el-checkbox>
              </li>
            </ul>
          </el-checkbox-group>
        </div>
      </div>
      <div class="right">
        <div class="top">
          <!-- <el-input v-model="searchName2"  style="width: 240px" placeholder="请输入名称" clearable @input="searcSelectUser()"/>  -->
        </div>
        <div class="container">
          <ul>
            <li v-for="item in checkUser" :key="item.id">
              <span>{{ item.name }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </UnModel>
</template>
<script setup lang="ts">
import { ref, onMounted,defineProps,watch } from 'vue'
import { getUser, getUserInfoListApi } from '@/api/mgmtUser' //api/后面不能大写Mgmt
import UnModel from '@/components/UnModel/index.vue'
import { debounce, throttle } from '@/utils/index.js'
interface User {
    id:string,
    name:string
    pwd:string
    email:string
    gender:string
    tel:string
    icon:string
    create_tiem:string
}
// 接受父组件数据
// const modelValue =ref(false)
const props = defineProps({
  title: { type: String, default: '' },
  modelValue: { type: Boolean, default: false },
  selectUserId: { type: Array, default: [] } //默认勾选的人id
  // selectUser: { type: Array, default: [] } //默认勾选的人
})
// 子组件通过事件向父组件传值
const emit = defineEmits(['onClose1', 'onOk1'])
const closeModel = () => {
  emit('onClose1')
}
const onOk = () => {
  emit('onOk1', checkUser.value)
}
const pageNum = ref(1)
const pageSize = ref(10)
const checkList = ref([]) // 选中的人员 id
const checkUser = ref<User[]>([]) //  选中的人员
const userList = ref<User[]>([]) //所有人员

const searchName1 = ref('') // 左边输入框
const searchName2 = ref('')

//选中事件
const changeUser = async (v) => {
  // console.log(v)
  // let res = userList.value.filter(item=>v.includes(item.id))
  // console.log(res)
  // checkUser.value = res
}
// 获取人员列表带分页
const getUserData = async () => {
  const res = await getUser({ pageNum: pageNum.value, pageSize: pageSize.value, userNane: searchName1.value })
  if (res.code === 200) {
    userList.value.push(...res.data.list)
  }
}
// 右边人员列表
const selectedList = async () => {
  const ids = props.selectUserId
  if (ids.length) {
    const res = await getUserInfoListApi({ userIds: ids })
    if (res.code === 200) {
      checkList.value = ids
      checkUser.value.push(...res.data)
    }
  }
}
//防抖搜索 左边人员
const headleAllUser = async () => {
  pageNum.value = 1
  const res = await getUser({ pageNum: pageNum.value, pageSize: pageSize.value, userNane: searchName1.value })
  if (res.code === 200) {
    userList.value = res.data.list
  }
}
//防抖搜索
const searchAllUser = debounce(headleAllUser, 3000)

const headleSelectUSer = async () => {
  console.log(searchName2.value)
}
// 节流搜索
const searcSelectUser = throttle(headleSelectUSer, 3000)

watch(checkList,async(newValue,oldValue)=>{
  if(newValue.length>oldValue.length){  //差集就是新增的 或 删除的
    let adduserIds =  newValue.filter(item=>!oldValue.includes(item))
    console.log(adduserIds,'新增')
    const res = await getUserInfoListApi({ userIds: adduserIds})
    if (res.code === 200) {
      checkUser.value.push(...res.data)
    }
  }else{
    let delIds =  oldValue.filter(item=>!newValue.includes(item))
    console.log(delIds,'减少') 
    const index = checkUser.value.findIndex(item => item.id === delIds[0])
    checkUser.value.splice(index, 1)
  }
})
onMounted(async() => {
  await getUserData()
  checkList.value = props.selectUserId
  // await selectedList()
  // checkList.value.push('A0000014')
})
const load = () => {
  pageNum.value += 1
  getUserData()
  console.log(pageNum.value)
}
</script>
<style lang="scss" scoped>
.user-box {
  height: 330px;
  .left {
    width: 50%;
    height: 100%;
    overflow: auto;
    border-right: 1px solid #ddd;
    padding: 10px 20px;
    .top {
      height: 35px;
    }
    .container {
      height: calc(100% - 35px);
      overflow-y: auto;
    }
    li {
      height: 32px;
      line-height: 32px;
    }
  }
  .right {
    width: 50%;
    overflow: auto;
    padding: 10px 20px;
    .top {
      height: 35px;
    }
    .container {
      height: calc(100% - 35px);
      overflow-y: auto;
    }
    li {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>
